<template>
  <div class="calendar page">
    <div class="printButton" @click="print">打印</div>
    <h1 class="title">计算机科学与工程学院2020-2021第二学期课表</h1>
    <h3 class="teacher">教师：XXX</h3>
    <table border="1">
      <thead v-if="header">
        <tr>
          <td v-for="head in header" :key="head">{{ head }}</td>
        </tr>
      </thead>

      <tbody>
        <tr v-for="(day, index) in weekDays" :key="index">
          <td v-for="arrangement in day" :key="arrangement.aid">
            <ArrangementPiece
              :lesson_name="arrangement?.alesson?.lname || arrangement"
              :lesson_teacher="arrangement?.ateacher?.tname"
              :lesson_classroom="arrangement?.aclassroom?.cname"
              :lesson_weeknumber="arrangement?.aweekNum"
              @click="handleArrangementSelect(arrangement)"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { apis } from "../api";
import store from '../store'
import Notify from "../components/TipsDialog";
import ArrangementPiece from "../components/ArrangementPiece.vue";

export default {
  components: { ArrangementPiece },
  beforeRouteEnter(to, from, next) {
    if (store.token === null || store.token === '') {
      Notify({
        title: "尚未登录，请登录",
        icon: to.meta.icon,
        showDuration: 5000,
      })
      next('/login')
      return
    }
    next()
  },
  setup() {
    const createWeekDaysArrangementsArray = (weekDays, maxScheduleNum) => {
      let output = [];
      for (let i = 0; i < maxScheduleNum; i++) {
        let tempArray = [];
        for (let j = 0; j < weekDays; j++) {
          tempArray.push(j == 0 ? i + 1 : 0);
        }

        output.push(tempArray);
      }
      return output;
    };

    const print = () => {
      window.print();
    };

    const data = reactive({
      header: ["", "一", "二", "三", "四", "五", "六", "日"],
      weekDays: createWeekDaysArrangementsArray(8, 11),
      id: 1,
    });

    apis
      .getArrangementByTeacherId(2)
      .then((data) => data.data.result)
      .then((arrangements) => {
        arrangements.forEach((arrangement) => {
          arrangement.aweekNum = arrangement.aweekNum.toString();
          let weekDay = arrangement.aweekDay; //周几的课
          let scheduleId = arrangement.aschedule.sid; //第几节课
          if (weekDay && scheduleId) {
            if (
              data.weekDays[scheduleId - 1][weekDay].hasOwnProperty(
                "alesson"
              ) &&
              data.weekDays[scheduleId - 1][weekDay].alesson.lid ==
              arrangement.alesson.lid
            ) {
              arrangement.aweekNum = `${data.weekDays[scheduleId - 1][weekDay].aweekNum
                } ${arrangement.aweekNum}`;
            }

            data.weekDays[scheduleId - 1][weekDay] = arrangement;
          }
        });
      });

    const handleArrangementSelect = (arrangement) => {
      console.log(arrangement);
    };

    return { ...toRefs(data), handleArrangementSelect, print };
  },
};
</script>


<style lang="less" scoped>
.calendar {
  min-height: 100vh;
  background-color: #706baf;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 0;
  justify-content: flex-start;
  gap: 30px;

  & table {
    width: 500px;
    text-align: center;

    & thead {
      font-weight: bolder;
      font-size: 24px;
    }

    & tr td:nth-child(1) {
      line-height: 100px;
      min-width: 5vw;
      width: 5vw !important;
    }

    & td {
      min-height: 100px;
      min-width: 10vw;
    }
  }
}
.printButton {
  position: absolute;
  right: 5px;
  top: 5px;
  padding: 10px 20px;
  border: 1px solid wheat;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.5s;
  &:active {
    scale: 70%;
    transform: scale(0.9, 0.9);
  }
}
</style>